/**
 *  学习目标：非父子通讯 - Context 上下文对象
 *    Context 上下文对象解构出两个组件： Provider 和 Consumer
 *      提供数据：
 *        <Provider value={ 提供的数据 }></Provider>
 *      消费数据：💥 插槽必须为函数
 *        <Consumer>{ (提供的数据) => 消费数据 }</Consumer>
 *
 *    注意事项：
 *      1. Consumer 内部嵌套的函数会自动执行，要注意函数的返回值需符合 模板数据展示语法要求
 *      2. 分拆的单文件组件如何处理？解决方案：确保 Provider 和 Consumer 是有同一个 Context 对象解构出来的
 */
import React from 'react'
import { Provider } from './store'
import Son from './Test'

export default class App extends React.Component {
  render() {
    return (
      <Provider value={{ aa: 11, bb: 22, cc: 33 }}>
        <div className='app'>
          <h1>App</h1>
          <Son />
        </div>
      </Provider>
    )
  }
}
